<template>
  <view>
    <index-list :sticky="sticky" :z-index="zIndex" :topHeight="topHeight" :scrollTop="scrollTop" :index-list="rightIndex">
      <slot></slot>
      <view v-for="(item, index) in alist" :key="index">
        <index-letter :index="item[labelKey]" />
        <view
          @click="chooseCurComponent(item1, indexs)"
          class="list-cell border-bottom"
          :class="{ active: item1[valueKey] == value || (value === '' && item1[nameKey] == name) }"
          v-for="(item1, indexs) in item[childrenKey]"
          :key="indexs"
        >
          {{ item1[nameKey] }}
        </view>
      </view>
    </index-list>
  </view>
</template>

<script>
import indexLetter from './index-letter.vue'
import indexList from './index-list.vue'
export default {
  name: 'benben-index-list',
  components: { indexList, indexLetter },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    topHeight: {
      type: [Number, String],
      default: 0,
    },
    //关键字过滤
    keyword: {
      type: [Number, String],
      default: '',
    },
    // 是否开启吸顶
    sticky: {
      type: Boolean,
      default: false,
    },
    // 吸顶层级
    zIndex: {
      type: [Number, String],
      default: 99,
    },
    labelKey: {
      type: String,
      default: 'letter',
    },
    childrenKey: {
      type: String,
      default: 'children',
    },
    nameKey: {
      type: String,
      default: 'name',
    },
    valueKey: {
      type: String,
      default: 'adCode',
    },
    scrollTop: {
      type: [Number, String],
      default: 0,
    },
    name: {
      type: [Number, String],
      default: '',
    },
    // 选中的城市code码 value  value
    value: {
      type: [Number, String],
      default: '',
    },
  },
  computed: {
    rightIndex() {
      return this.alist.map((item) => item[this.labelKey])
    },
    alist() {
      let keyword = this.keyword?.trim()
      let alist = []
      this.list.map((item) => {
        if (!item?.hasOwnProperty(this.childrenKey) || !item[this.childrenKey].length) return false
        if (keyword) {
          let children = []
          item[this.childrenKey].map((item1) => {
            if (item1[this.nameKey].indexOf(this.keyword) > -1) {
              children.push(item1)
            }
          })
          if (children.length) {
            alist.push({ ...item, [this.childrenKey]: children })
          }
        } else {
          alist.push(item)
        }
        return true
      })
      return alist
    },
  },
  data() {
    return {}
  },
  methods: {
    chooseCurComponent(item) {
      this.$emit('input', item[this.valueKey])
      this.$emit('update:name', item[this.nameKey])
      this.$emit('chooseCity', item)
    },
  },
  created() {},
}
</script>

<style lang="scss" scoped>
// --city-active-color: rgba(217, 179, 10, 1);选中城市文字颜色
// --city-active-bg: rgba(242, 10, 10, 1);选中城市背景色
// --letter-color: rgba(255, 191, 0, 1); 侧边栏文字颜色
// --letter-active-color: rgba(255, 191, 0, 1); 侧边栏选中文字颜色
// --city-letter-color: rgba(217, 179, 10, 1); 字母栏颜色
// --city-letter-active-color: rgba(217, 179, 10, 1);定位字母栏颜色
// --city-letter-active-bg: rgba(217, 179, 10, 1);定位字母栏背景
// --city-letter-bg: rgba(242, 10, 10, 1);字母栏背景色
// --city-item-color: var(--benbenFontColor1);
// --city-item-bg: rgba(255, 205, 48, 1);
// --city-item-border-bottom: #f5f5f5;
.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: var(--city-item-color, #606266);
  font-size: 14px;
  line-height: 24px;
  background-color: var(--city-item-bg, #fff);
}
.list-cell.active {
  background-color: var(--city-active-bg, #fddacd);
  color: var(--city-active-color, #f47040);
}
.border-bottom {
  border-bottom: 1px solid var(--thin-border-color, #eee);
}
</style>
